<template>
  <div>

<my-table  :list = 'list'>
<!-- 标题 -->
  <template v-slot:title>
<h4>标题1</h4>
</template>
  <!-- id -->
  <template v-slot:id="scope">
    <h1>{{scope.id}}</h1>
  </template>

<!-- 资产名 -->

 <template v-slot:name1="scope">
    <h2>{{scope.name2}}</h2>
  </template>

<template v-slot:price="scope">
    <h2>{{scope.price1}}</h2>
  </template>

<template v-slot:time="scope">
    <h4>{{scope.time1}}</h4>
  </template>

<template v-slot:btn>
    <button>删除</button>
  </template>
</my-table>

  </div>
</template>

<script>

import MyTable from './components/MyTable.vue'
import 'bootstrap/dist/css/bootstrap.css'
export default {
  components: { MyTable },
  data () {
    return {

      list: [
        { id: 100, name: '外套', price: 199, time: new Date('2010-08-12') },
        { id: 101, name: '裤子', price: 34, time: new Date('2013-09-01') },
        { id: 102, name: '鞋', price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: '头发', price: 19900, time: new Date('2020-12-12') }
      ]
    }
  }
}

</script>

<style>
.red {
  color: red;
}
</style>
